<template>
  <div class="createPost-container">
    <el-form ref="dataForm" :rules="rules" :model="formData" label-position="right" label-width="135px"
        style="margin: 20px 50px;">
      <el-form-item label="供需标题" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="规格" prop="specs">
        <el-input v-model="formData.specs"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)" prop="topPrice">
        <NumInput :min="1" :float="2" v-model="formData.topPrice" />
      </el-form-item>
      <el-form-item label="联系人" prop="connectName">
        <el-input v-model="formData.connectName"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="connectPhone">
        <el-input v-model="formData.connectPhone"></el-input>
      </el-form-item>
      <el-form-item label="图片:" prop="image" style="margin-bottom: 30px;">
        <UploadImage :image.sync="formData.image" :limit="1" :type=1 />
      </el-form-item>
      <el-form-item prop="content" style="margin-bottom: 30px;">
        <Tinymce :isProduct="false" ref="editor" v-model="formData.content" :width="920" :height="400" />
      </el-form-item>
    </el-form>
    <div class="btn_bg">
      <el-button type="primary" @click="saveData()">
        确定
      </el-button>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import NumInput from '@/components/NumInput'
import Tinymce from '@/components/Tinymce'
import { saveTrade, updateTrade, tradeGetById } from '@/api/trade'
import UploadImage from '@/components/UploadImage'

export default {
  name: "TradeHallEdit",
  props: {
    
  },
  components: {
    NumInput, Tinymce, UploadImage
  },
  data() {
    return {
      formData: {
        name: '',
        specs: '',
        content: '',
        topPrice: '',
        connectName: '',
        connectPhone: '',
        image: '',
        type: 1,
      },
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        specs: [{ required: true, message: '请输入', trigger: 'blur' }],
        content: [{ required: true, message: '请输入', trigger: 'blur' }],
        topPrice: [{ required: true, message: '请输入', trigger: 'blur' }],
        image: [{ required: true, message: '请选择', trigger: 'blur' }],
        connectName: [{ required: true, message: '请输入', trigger: 'change' }],
        connectPhone: [{ required: true, message: '请输入', trigger: 'change' }, { min: 11, max: 11, message: '请输入正确电话号码', trigger: 'blur' }],
      },
      editType: 1,//1: 添加，2:修改
      paramId: ''
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  watch: {},
  methods: {
    getData() {
      tradeGetById({ id: this.paramId, showType: 2}).then(res => {
        this.formData.id = res.id
        this.formData.name = res.name
        this.formData.specs = res.specs
        this.formData.content = res.content
        this.formData.topPrice = res.topPrice
        this.formData.connectName = res.connectName
        this.formData.connectPhone = res.connectPhone
        this.formData.image = res.image
        this.formData.type = res.type
      })
      .catch((err) => {
        
      })
    },
    saveData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.editType == 1) {
            saveTrade(this.formData).then(() => {
              this.dialogFormVisible = false
              this.$message({
                message: '操作成功',
                type: 'success'
              });

              // 调用全局挂载的方法,关闭当前标签页
              this.$store.dispatch("tagsView/delView", this.$route);
              
              this.$router.push({
                path: "/tradeHall/index",
                query: {
                  t: Date.now()
                }
              });
            })
          } else {
            updateTrade(this.formData).then(() => {
              this.dialogFormVisible = false
              this.$message({
                message: '操作成功',
                type: 'success'
              });

              // 调用全局挂载的方法,关闭当前标签页
              this.$store.dispatch("tagsView/delView", this.$route);
              
              this.$router.push({
                path: "/tradeHall/index",
                query: {
                  t: Date.now()
                }
              });
            })
          }
        }
      })
    },
  },
  created() {
    if (this.userInfo.type === 1) {
      this.formData.type = 2
    } else {
      this.formData.type = 1
    }

    this.paramId = this.$route.query.paramId
    if (this.paramId) {
      this.editType = 2
      this.getData()
    } else {
      this.editType = 1
    }
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .btn_bg {
    @include flex-center;
  }
</style>